// 课程管理页面
<template>
	<div class="all">
    <el-button @click="addCou()" type="primary">增加课程</el-button>

    <div id="searchdiv">
      <el-input placeholder="请输入内容" v-model="keywords" class="input-with-select">
        <el-button @click="getCourseInfo()" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div style="height: 10px;"></div>

		<el-table :data="pagination.records" border>
			<el-table-column fixed="left" prop="courseId" label="课程编号"></el-table-column>
			<el-table-column prop="courseName" label="课程名称"></el-table-column>
			<el-table-column prop="user.userId" label="教师编号"></el-table-column>
			<el-table-column prop="user.userName" label="教师姓名"></el-table-column>
			<el-table-column prop="courseStatus" label="是否开课" align="center">
				<template slot-scope="scope">
					<p v-if="scope.row.courseStatus=='0'">未开课</p>
					<p v-if="scope.row.courseStatus=='1'">已开课</p>
				</template>
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="250px">
				<template slot-scope="scope">
					<el-button @click="uploadDa(scope.row.courseId)" type="warning" size="small">课程资料</el-button>
					<el-button @click="updateCou(scope.row.courseId)" type="primary" size="small">编辑</el-button>
					<el-button @click="deleteCou(scope.row.courseId)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
		 :page-sizes="[6, 10]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
		 class="page">
		</el-pagination>
		<!-- 编辑对话框-->
		<el-dialog title="编辑课程信息" :visible.sync="updateDialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="课程编号">
						<el-input disabled="" v-model="form.courseId"></el-input>
					</el-form-item>
					<el-form-item label="课程名称">
						<el-input v-model="form.courseName"></el-input>
					</el-form-item>
					<el-form-item label="教师编号">
						<el-input disabled="" v-model="form.user.userId"></el-input>
					</el-form-item>
					<el-form-item label="教师名称">
						<el-input disabled="" v-model="form.user.userName"></el-input>
					</el-form-item>
					<el-form-item label="课程状态">
						<el-button v-if="form.courseStatus">已开课</el-button>
						<el-button @click="changeStatus()" v-else>开课</el-button>

					</el-form-item>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="updateDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateCourse()">确 定</el-button>
			</span>
		</el-dialog>
		<!--增加课程的对话框-->
		<el-dialog title="增加课程信息" :visible.sync="addDialogVisible" width="30%" :before-close="handleClose">
			<section class="update">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="课程名称">
						<el-input v-model="form.courseName"></el-input>
					</el-form-item>
					<el-form-item label="教师编号">
						<el-input disabled="" v-model="form.user.userId"></el-input>
					</el-form-item>
					<el-form-item label="教师名称">
						<el-input disabled="" v-model="form.user.userName"></el-input>
					</el-form-item>
					</el-form>
				</el-form>
			</section>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCourse()">确 定</el-button>
			</span>
		</el-dialog>

    <!--课程资料查看及上传-->
    <el-dialog title="上传课程资料" :visible.sync="uploadDialogVisible" width="30%" :before-close="handleClose">
    	<section class="update">
    		<el-table :data="courseData" border>
    			<el-table-column fixed="left" prop="index" label="编号"></el-table-column>
				<el-table-column prop="dataName" label="资料名称"></el-table-column>
    			<!-- <el-table-column prop="datasize" label="资料大小"></el-table-column> -->
    			<el-table-column fixed="right" label="资料下载">
    				<template slot-scope="scope">
    			    <el-button @click="downloadData(scope.row.index)" type="warning" size="small">下载</el-button>
    				</template>
    			</el-table-column>
				<el-table-column fixed="right" label="资料删除">
					<template slot-scope="scope">
				    <el-button @click="deleteData(scope.row.index)" type="warning" size="small">删除</el-button>
					</template>
				</el-table-column>
    		</el-table>
		<el-upload drag multiple
		 name="multipartfiles"
		 ref="upload"
		 :limit="limit"
		 :action="imageAction"
		 :data="uploadData"
		 :on-preview="handlePreview"
		 :file-list="fileList"
		 :on-exceed = "onExceed"
		 :onError="uploadError"
		 :onSuccess="uploadSuccess"
		 :auto-upload="true">
		 <i class="el-icon-upload"></i>
		 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		 <div class="el-upload__tip" slot="tip">只能上传'jpg/png/jpeg/gif'</div>
		</el-upload>
    	</section>
    	<span slot="footer" class="dialog-footer">
    		<el-button @click="uploadDialogVisible = false">取 消</el-button>
    		<el-button type="primary" @click="uploadDialogVisible = false">确 定</el-button>
    	</span>
    </el-dialog>
	</div>
</template>

<script>
	export default {
			data() {
				return {
					pagination: {
						//分页后的考试信息
						current: 1, //当前页
						total: null, //记录条数
						size: 6, //每页条数
					},
					updateDialogVisible: false, //对话框
					addDialogVisible: false,//增加的对话框
					uploadDialogVisible: false,
					form: {
						courseId:'',
						courseName:'',
						user:{userId:this.$cookies.get("cid"),userName:this.$cookies.get("cname")},
						courseData:'',
						courseStatus:''
					}, //保存点击以后当前试卷的信息
					// select: 1,
					keywords:'',
					courseData:[],
					imageAction: '',//。。。我才刚知道token可以不放在header中，直接放在路径后面也行
						limit: 1,
						fileList: [],
						uploadData:''
				};
			},
			created() {
				// this.form.user={userId:this.$cookies.get("cid"),userName:this.$cookies.get("cname")}
				this.getCourseInfo()
			},
			methods: {
        handlePreview (file) {
          if (file.status === 'success') {
            this.imageVisiable = true
            this.$nextTick(() => {
              this.$refs.showImage.init(file.url)
            })
          }
        },
        onExceed (files, fileList) {
          this.$message.error('提示：一次只能上传一个文件！')
        },

        uploadSuccess (response, file, fileList) {
          this.fileIds = response.fileIds
          console.log('上传成功')

      this.uploadDa(this.form.courseId)
        },
        uploadError (response, file, fileList) {
          this.$message.error('上传失败！')
        },

				getCourseInfo() {

					//分页查询所有试卷信息

					  this.$axios( '/api/course/listcoursebyteacher',{
					    params: {
							userId:this.form.user.userId,
					      keywords:this.keywords,
					      page:this.pagination.current,
					      limit:this.pagination.size
					    }
					  }).then(res => {
						  console.log(res.data)
					  	this.pagination = res.data;
					  }).catch(error => {});

				},

				uploadDa(courseId) {
					this.uploadDialogVisible=true
					this.$axios( '/api/course/getcoursebyid/'+courseId).then(res => {
						this.form = res.data
						this.imageAction= `/api/course/save/`+res.data.courseId
					})
					this.$axios( '/api/course/getcoursedatabyid/'+courseId).then(res => {
						this.courseData = res.data
					})

					console.log(this.imageAction)
				},

				downloadData(index){
					// this.$axios( '/api/course/download/'+this.form.courseId+'/'+index).then(res => {

					// })
					let tempPage = window.open('_blank');//先打开一个空白页

					tempPage.location =  '/api/course/download/'+this.form.courseId+'/'+index; //再设置空白页的地址

				},
				changeStatus(){
					this.form.courseStatus=1
				},
				updateCou(courseId) { //打开并获取要修改的试题信息 ✔
						// this.getAllUserId(courseId)

						this.$axios( '/api/course/getcoursebyid/'+courseId).then(res => {
							this.form = res.data
						})
						this.updateDialogVisible = true
					},
				//改变当前记录条数
				handleSizeChange(val) {
					this.pagination.size = val;
					this.getCourseInfo();
				},
				//改变当前页码，重新发送请求
				handleCurrentChange(val) {
					this.pagination.current = val;
					this.getCourseInfo();
				},
				addCourse(){
					this.addDialogVisible = false
					console.log(this.form)
					this.$axios({
						url:  '/api/course/addcourse',
						method: 'post',
						data: {
							...this.form
						}
					}).then(res => {
						console.log(res)
						if (res.data != null) {
							this.$message({
								message: '添加成功',
								type: 'success'
							})
						}
						this.getCourseInfo()
					})
				},
				updateCourse() { //提交更改 ✔
					this.updateDialogVisible = false
					this.$axios({
						url:  '/api/course/updatecourse',
						method: 'post',
						data: {
							...this.form
						}
					}).then(res => {
						console.log(res)
						if (res.data != null) {
							this.$message({
								message: '更新成功',
								type: 'success'
							})
						}
						this.getCourseInfo()
					})
				},
				addCou(courseId) { //增加课程信息
					// this.getAllUserId()
					this.form={
						courseId:'',
						courseName:'',
						user:{userId:this.$cookies.get("cid"),userName:this.$cookies.get("cname")},
						courseData:'',
						courseStatus:0
					}
					this.addDialogVisible = true
				},
				deleteCou(courseId) { //删除 ✔
					this.$confirm("确定删除当前课程吗？删除后无法恢复", "Warning", {
						confirmButtonText: '确定删除',
						cancelButtonText: '算了,留着吧',
						type: 'danger'
					}).then(() => { //确认删除
						this.$axios({
							url:  '/api/course/deletecourse/'+courseId,
							method: 'get'
						}).then(res => {
							if(res.data.equals("删除成功")){
							  this.$message({
								message: '删除成功',
								type: 'success'
							  })
							  this.getCourseInfo()
							}else{
							  this.$message({
								message: '删除失败',
								type: 'error'
							  })
							}
						})
					}).catch((error) => {
						this.$message({
							message: '删除失败',
							type: 'error'
						})
					})
				},
				deleteData(index){
					this.$axios( '/api/course/deletecoursedata/'+this.form.courseId+'/'+index).then(res => {
						this.courseData = res.data
					})

					// this.uploadDa(this.form.courseId)
					this.$message({
													message: '删除成功',
													type: 'success'
					})
				},
				handleClose(done) { //关闭提醒
					this.$confirm('确认关闭？')
						.then(_ => {
							done();
						}).catch(_ => {});
				}
			}
		};
	</script>
	<style lang="scss" scoped>
		.all {
			padding: 0px 40px;

			.page {
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.edit {
				margin-left: 20px;
			}

			.el-table tr {
				background-color: #dd5862 !important;
			}
		}

		.el-table .warning-row {
			background: #000 !important;
		}

		.el-table .success-row {
			background: #dd5862;
		}

	  #searchdiv{
	    width: 400px;
	    display: inline-block;
	    margin-left: 0px;
	  }

	  #searchstatus {
	    width: 150px;
	    display: inline-block;
	    margin-left: 58%;
	  }
	</style>
